<template>
  <div>
    <div class="itxst content-box">
      <div class="outerBox" v-for="(item,index) in customList" :key='index'>
        <div class="outerTitle">{{ item.nameBak }}</div>
        <div class="innerBox">
          <div v-for="(items, ind) in item.newChildren" :key='ind'>
            <div class="itemsTitle">{{ items.childrenName }}</div>
            <div class="innerBox2">
              <div class="innerBox3" v-for="(itm, inde) in items.newChildren" :key='inde'>
                <div class="itmTitle">{{ itm.childrenName }}</div>
                <div style='display: flex;position: relative;width: 100%;' v-for="(it, indexx) in itm.children" :key='indexx'>
                  <div class="main-inner">第 <span style="font-weight: 500;font-size: 20px;padding: 0 4px;">{{ it.round }}</span> 轮</div>
                  <div class="main-inner">第 <span style="font-weight: 500;font-size: 20px;padding: 0 4px;">{{ it.scene }}</span> 次</div>
                  <div class="name-inner">{{ it.studentName || it.anonymousNumber }}</div>
                  <div class="pos" @click="moveTo(it)" v-if="ifAnonymous !== '1'">移动 </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 模态框 start -->
    <el-dialog
      append-to-body
      :title="'考生（' + chooseObj.studentName + '）移动至'"
      :visible="movedisplay"
      width="600px"
      style='z-index: 10000;'
      :before-close="beforeClose"
      size="small">
      <div style="height: 400px;overflow: auto;padding: 10px;background: #f5f5f5;border-radius: 6px;">
        <div v-if="sinceChoose == 'first'">
          <div class="outerBox" v-for="(item,index) in customList" :key='index'>
            <div class="outerTitle">{{ item.nameBak }}</div>
            <div class="innerBox">
              <div v-for="(items, ind) in item.newChildren" :key='ind'>
                <div class="itemsTitle">{{ items.childrenName }}</div>
                <div class="innerBox2">
                  <div class="innerBox3" v-for="(itm, inde) in items.newChildren" :key='inde'>
                    <div class="itmTitle itmTitleHover" @click="chooseItem(itm)">{{ itm.childrenName }}</div>
                </div>
                </div>  
              </div>
            </div>
          </div>
        </div>
        <div v-if="sinceChoose == 'second'">
          <div>{{ changeArr.childrenName }}</div>
          <div style='display: flex;position: relative;width: 100%;' v-for="(it, indexx) in changeArr.children" :key='indexx'>
            <div class="main-inner">第 <span style="font-weight: 500;font-size: 20px;padding: 0 4px;">{{ it.round }}</span> 轮</div>
            <div class="main-inner">第 <span style="font-weight: 500;font-size: 20px;padding: 0 4px;">{{ it.scene }}</span> 次</div>
            <div class="name-inner">{{ it.studentName || it.anonymousNumber }}</div>
            <div class="pos" @click="confirmMoveTo(it)" >替换</div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer" v-if="sinceChoose === 'second'">
        <el-button  @click="sinceChoose = 'first'" size="small" >返回第一步</el-button>
      </span>
    </el-dialog>
    <!-- 模态框 end -->
  </div>
</template>

<script>
import draggable from 'vuedraggable'
// import { student, recordsstationstudentList } from '@/api/examTest.js'
import { studentRandomizationB, recordsstationstudentSave, recordsstationstudentTreeList } from '@/api/examTest.js'
import { studentList } from '@/api/examinee.js'
export default {
  props: ['studentPoolId', 'recordsId', 'ifAnonymous', 'passwordCheck', 'ifOrder'],
  name: 'HelloWorld1',
  components: { draggable },
  data () {
    return {
      movedisplay: false,
      sinceChoose: 'first',
      // 选中的对象
      chooseObj: {},
      // 要替换的对象
      changeArr: {},
      qqq: [],
      activeName: 'custom',
      customList: [],
      selfTabsList: [],
      drag: false,
      message: '',
      groupA: {
        name: 'itxst',
        put: true,
        pull: true
      },
      groupB: {
        name: 'itxst',
        pull: true,
        put: true
      },
      // 定义要被拖拽对象的数组
      studentsList: [],
      arr2: [
        {
          title: '1组',
          chirden: []
        },
        {
          title: '2组',
          chirden: []
        },
        {
          title: '3组',
          chirden: []
        },
        {
          title: '4组',
          chirden: []
        }
      ],
      studentsListLength: 0,
      chooseCurrentFlag: 0,
      // 空数组之在的样式，设置了这个样式才能拖入
      style: 'min-height:120px;display: block;'
    }
  },
  methods: {
    // 移动 start
    moveTo (val) {
      this.chooseObj = val
      this.movedisplay = true
    },
    chooseItem (val) {
      console.log(val)
      this.changeArr = val
      this.sinceChoose = 'second'
    },
    // 替换
    confirmMoveTo (val) {
      let aaa = JSON.parse(JSON.stringify(val))
      if (val.studentId === this.chooseObj.studentId) {
        this.$message.warning('考生不能和自己替换')
        return
      }

      console.log(aaa.studentName)
      // 这个是要剔除掉的人，把 chooseObj塞进去，并且把round也替换成之前人的轮次
      this.customList.map(m => {
        m.newChildren.map(n => {
          n.newChildren.map(l => {
            l.children.map(w => {
              if (w.studentId === aaa.studentId) {
                w.id = this.chooseObj.id
                w.recordsId = this.chooseObj.recordsId
                w.recordsDateId = this.chooseObj.recordsDateId
                w.recordsStationId = this.chooseObj.recordsStationId
                w.recordsStationNumber = this.chooseObj.recordsStationNumber
                w.recordsStationName = this.chooseObj.recordsStationName
                w.studentId = this.chooseObj.studentId
                w.studentPool = this.chooseObj.studentPool
                w.studentName = this.chooseObj.studentName
                w.studentIdcard = this.chooseObj.studentIdcard
                w.studentMobile = this.chooseObj.studentMobile
                w.studentStatus = this.chooseObj.studentStatus
                w.trainingBase = this.chooseObj.trainingBase
                w.anonymousNumber = this.chooseObj.anonymousNumber
                w.status = this.chooseObj.status
                w.team = this.chooseObj.team
                w.deptName = this.chooseObj.deptName
                w.examLocation = this.chooseObj.examLocation
                w.examAddress = this.chooseObj.examAddress
                w.examTime = this.chooseObj.examTime
                w.checkTime = this.chooseObj.checkTime
                w.isMove = true
              }
            })
          })
        })
      })
      this.customList.map(m => {
        m.newChildren.map(n => {
          n.newChildren.map(l => {
            l.children.map(w => {
              if (w.studentId === this.chooseObj.studentId && !w.isMove) {
                w.id = aaa.id
                w.recordsId = aaa.recordsId
                w.recordsDateId = aaa.recordsDateId
                w.recordsStationId = aaa.recordsStationId
                w.recordsStationNumber = aaa.recordsStationNumber
                w.recordsStationName = aaa.recordsStationName
                w.studentId = aaa.studentId
                w.studentPool = aaa.studentPool
                w.studentName = aaa.studentName
                w.studentIdcard = aaa.studentIdcard
                w.studentMobile = aaa.studentMobile
                w.studentStatus = aaa.studentStatus
                w.trainingBase = aaa.trainingBase
                w.anonymousNumber = aaa.anonymousNumber
                w.status = aaa.status
                w.team = aaa.team
                w.deptName = aaa.deptName
                w.examLocation = aaa.examLocation
                w.examAddress = aaa.examAddress
                w.examTime = aaa.examTime
                w.checkTime = aaa.checkTime
              }
              delete w.isMove
            })
          })
        })
      })
      this.movedisplay = false
      this.sinceChoose = 'first'
    },
    beforeClose () {
      this.movedisplay = false
      this.sinceChoose = 'first'
    },
    // 移动 end
    // 开始拖拽事件
    onStart () {
      this.drag = true
      return true
    },
    // 拖拽结束事件
    onEnd () {
      this.drag = false
    },

    // 获取学生列表
    getStudentList () {
      let params = {
        page: 1,
        limit: 10000,
        studentPoolId: this.studentPoolId || 'dc3b87a2f52863be2b5b382af1c1f507',
        orderSql: 'creat_date desc'
      }
      console.log('params', params)
      studentList(params).then(res => {
        this.studentsList = res.data.page.records
        this.studentsListLength = this.studentsList.length
      })
    },

    // 随机分组
    getStudentRandomization () {
      let params = {
        recordsId: this.recordsId,
        studentPoolId: this.studentPoolId || 'dc3b87a2f52863be2b5b382af1c1f507'
      }
      studentRandomizationB(params).then(res => {
        // console.log('this.customList', this.customList[0])
        let aaa = []
        for (var el in res.data.show) {
          aaa.push({
            name: el,
            nameBak: el.substring(0, 16) + ' ~' + el.substring(30, 36),
            children: res.data.show[el]
          })
        }
        aaa = aaa.sort((a, b) => new Date(a.name.substring(0, 19)).getTime() - new Date(b.name.substring(0, 19)).getTime())
        aaa.map(q => {
          q.newChildren = []
          for (var ele in q.children) {
            q.newChildren.push({
              childrenName: ele,
              children: q.children[ele]
            })
          }
        })
        aaa.map(q => {
          q.newChildren.map(p => {
            p.newChildren = []
            for (var eles in p.children) {
              p.newChildren.push({
                childrenName: eles,
                children: p.children[eles]
              })
            }
          })
          aaa.map(v => {
            v.newChildren = v.newChildren.sort((a, b) => parseInt(a.childrenName.substring(1, 2)) - parseInt(b.childrenName.substring(1, 2)))
          })
          aaa.map(v => {
            v.newChildren.map(p => {
              if (p.newChildren) {
                p.newChildren = p.newChildren.sort((a, b) => parseInt(a.childrenName.substring(1, 2)) - parseInt(b.childrenName.substring(1, 2)))
              }
            })
          })
        })
        this.customList = JSON.parse(JSON.stringify(aaa))
      })
    },
    handleClick (val) {
      this.getStudentRandomization()
      this.getStudentList()
    },
    // 第三步保存
    thirdSubmitHandle () {
      let par = []
      this.customList.map(m => {
        m.newChildren.map(n => {
          n.newChildren.map(l => {
            l.children.map(w => {
              par.push(w)
            })
          })
        })
      })
      recordsstationstudentSave(par).then(res => {
        this.$message({
          type: 'success',
          message: '考生信息保存成功'
        })
        console.log(res)
        this.$emit('changeTab')
      })
    },

    // 获取第三步的数据
    getRecordsstationstudentList () {
      let params = {
        recordsId: this.recordsId,
        scene: 1
      }
      if (this.passwordCheck !== '') {
        params.password = this.passwordCheck
        params.passwordType = '1'
      } else {
        params.passwordType = '0'
      }
      recordsstationstudentTreeList(params).then(res => {
        if (res.data.show === '') {
          this.getStudentRandomization()
        } else {
          let aaa = []
          for (var el in res.data.show) {
            aaa.push({
              name: el,
              nameBak: el.substring(0, 16) + ' ~' + el.substring(30, 36),
              children: res.data.show[el]
            })
          }
          aaa = aaa.sort((a, b) => new Date(a.name.substring(0, 19)).getTime() - new Date(b.name.substring(0, 19)).getTime())
          aaa.map(q => {
            q.newChildren = []
            for (var ele in q.children) {
              q.newChildren.push({
                childrenName: ele,
                children: q.children[ele]
              })
            }
          })
          aaa.map(q => {
            q.newChildren.map(p => {
              p.newChildren = []
              for (var eles in p.children) {
                p.newChildren.push({
                  childrenName: eles,
                  children: p.children[eles]
                })
              }
            })
            aaa.map(v => {
              v.newChildren = v.newChildren.sort((a, b) => parseInt(a.childrenName.substring(1, 2)) - parseInt(b.childrenName.substring(1, 2)))
            })
            aaa.map(v => {
              v.newChildren.map(p => {
                if (p.newChildren) {
                  p.newChildren = p.newChildren.sort((a, b) => parseInt(a.childrenName.substring(1, 2)) - parseInt(b.childrenName.substring(1, 2)))
                }
              })
            })
          })
          this.customList = JSON.parse(JSON.stringify(aaa))
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.main-inner{
  width: 70px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.name-inner{
  padding-left: 10px;
  font-weight: 500;
  font-size: 20px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.pos{
  position: absolute;
  right: 0;
  top: 14px;
  color: #00b99e;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.pos:hover{
  text-decoration: underline;
}
.content-inner{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 16px;
  color: #000;
  width: 33%;
  
  
}
.outerBox{
  width: 100%;
  background: #00b99e20;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 6px;
  .outerTitle{
    color: #00b99e;
    font-weight: 500;
    font-size: 18px;
    padding-bottom: 10px;
  }
  .innerBox{
    background: #f5f5f5;
    border-radius: 6px;
    padding: 10px;
    .itemsTitle{
      color: #333;
      font-size: 16px;
      font-weight: 500;
      height: 40px;
      line-height: 40px;
    }
    .innerBox2{
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      background: #b6f2e960;
      .innerBox3{
        width: 33%;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin-right: 0.5%;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        .itmTitle{
          font-size: 16px;
          color: #333;
          font-weight: 500;

        }
        .itmTitleHover{
          color: #03957f;
          cursor: pointer;
        }
        .itmTitleHover:hover{
          color: #00b99e;

        }
      }
    }
  }

}
.ghostClass {
  background-color: #eee !important;
}

.chosenClass {
  background-color: #eee !important;
  opacity: 1 !important;
}

.dragClass {
  background-color: #eee !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}

.itxst {
  margin: 10px;
  display: flex;
  width: 100%;
}
// .itxst div {
//   flex: 0 0 45%;
// }
.title {
  padding: 6px 12px;
}

.col + .col {
  margin-left: 10px;
}
.item {
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border: solid 1px #eee;
  background-color: #f1f1f1;
}

.item:hover {
  background-color: #fdfdfd;
  cursor: move;
}

.item + .item {
  border-top: none;
  margin-top: 6px;
}

.col {
  margin: 12px;
  width: 100%;
  border: solid 1px #eee;
  border-radius: 5px;
}
.content-box{
  margin: 10px;
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  flex-wrap: wrap;
  .content-title{
    font-size: 16px;
    padding-bottom: 10px;
    margin: 10px 0;
    font-weight: 500;
    text-indent: 10px;
    position: relative;
    border-bottom: 1px solid #00b99e;
  }
  .content-title:before{
    position: absolute;
    content: '';
    left: 0;
    top: 2px;
    height: 14px;
    width: 4px;
    border-radius: 4px;
    background: #00b99e;

  }
  .student-box{
    padding: 8px 0;
    margin: 2px 0;
    border-bottom: 1px dotted #00b99e80;
  }
}
</style>